<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding:0;
		margin:0;
	}
	.ss{
		border-collapse: collapse;
	}
	.xx{
		width:60px;
		height:30px;
		text-align: center;
		border:1px solid #ccc;
		
	}
			.no{display: inline-block;width: 16px; height: 16px;  0px -96px no-repeat;}
			.one{display: inline-block;width: 16px; height: 16px; background: url(star-matrix.gif) 0px -16px no-repeat;}
			.two{display: inline-block;width: 16px; height: 16px; background: url(star-matrix.gif) 0px -96px no-repeat;}
			.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10{
				width:60px;
		        height:30px;
		        text-align: center;

			}
			.box1{
				color:#C57374;
				background-color:#CEC782;
			}
			.box2{
				color:#4B7052;
				background-color:#CD98AC;
			}
            .box3{
				color:#3B708A;
				background-color:#74AB8B;
			}
			.box4{
				color:#AE3D7E;
				background-color:#68A6C7;
			}
			.box5{
				color:#632D53;
				background-color:#CB805A;
			}
			.box6{
				color:#22527F;
				background-color:#7DA873;
			}
			.box7{
				color:#C57374;
				background-color:#4B7052;
			}
			.box8{
				color:#C57374;
				background-color:#C4BF88;
			}
			.box9{
				color:#AE3D7E;
				background-color:#CEC782;
			}
			.box10{
				color:#934578;
                background-color: #5E98B5;
			}
		</style>
</head>
<body>
<script>
// 斐波拉契数列 1,1,2,3,5,8,13,21……
  // 
   // var x1=1;
   // var x2=1;
   // var x3=0;
   // for(var i=3;i<=8;i++){
   //    document.write(x1 +",  ");
   //    x3=x1+x2;
   //    x1=x2;
   //    x2=x3;
   //  }
   //    document.write(x3);
   //    document.write("<br/>");
   //    
   //    
   //    
      // var s=parseInt(prompt("请输入显示多少位的一个整数："));  
      // var x=1;
      // var y=1;
      // var r=0;
      //  document.write(" 1,1,");
      // for(var i=3; i<=s;i++){
      //   if(i<=2){
      //      document.write(" 1,1,");
      //   }else{
      //   r=x+y;
      //    x=y;
      //    y=r;
        
      //    document.write(r);
      //    document.write(" ");
      //    }
      // }
      
      // var s=parseInt(prompt("请输入显示多少位的一个整数："));  
      // var x=1;
      // var y=0;
      // var r=0;
      // for(var i=1; i<=s;i++){
       
      //   r=x+y;
      //    x=y;
      //    y=r;
        
      //    document.write(r);
      //    document.write(" ");
      // }
   //    
   //    
       /*打印10*10矩形*/
			for(var i=1;i<=10;i++){		//控制行
				
				//打印10颗星星
				for(var j=1;j<=10;j++){	//控制个数
					document.write("<span class='one'></span>");
				}
				//换行
				document.write("<br />");
			}
/*打印三角形*/
          for(var i=1;i<=10;i++){
          	for(var j=1;j<=i;j++){
          		document.write("<span class='one'></span>");
          	}
          	document.write("<br />");
          }
/*打印倒三角形*/
document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i+1;j++){
          		document.write("<span class='one'></span>");
          	}
          	document.write("<br />");
          }
/*打印变种三角形13579……*/
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=2*i-1;j++){
          		document.write("<span class='one'></span>");
          	}
          	document.write("<br />");
          }
          /*打印等腰三角形*/
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=2*i-1;k++){
          		document.write("<span class='one'></span>");
          	}
          	document.write("<br />"); 
          }
          /*打印平行四边形*/
          document.write("<hr />");
           var s=6;
            for(var i=1;i<=6;i++){
          	for(var j=1;j<=2*(i-1);j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=12;k++){
          		document.write("<span class='one'></span>");
          	}
          	document.write("<br />");
          }

          /*打印平行四边形*/
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	    for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	    }
                for(x=1;x<=11;x++){
                document.write("<span class='one'></span>");
          	    }
          	document.write("<br />"); 
          }

// 第一题*********************************************************
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=2*i-1;k++){
          		if(k==1 || k==(2*i-1) || i==10){
          			document.write("<span class='one'></span>");
          		}
          		else{
          			document.write("<span class='no'></span>");
          		}
          		
          	}
          	document.write("<br />"); 
          }
 // 第二题*********************************************************
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=2*i-1;k++){
          		if(k==1 || k==(2*i-1) || i==10 && k%2 ==1){
          			document.write("<span class='two'></span>");
          		}
          		else{
          			document.write("<span class='no'></span>");
          		}
          		
          	}
          	document.write("<br />"); 
          }         	
// 第三题*********************************************************
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=2*i-1;k++){
          		if(k==1 || k==(2*i-1) || k==i || i==10){
          			document.write("<span class='one'></span>");
          		}
          		else{
          			document.write("<span class='no'></span>");
          		}
          		
          	}
          	document.write("<br />"); 
          }         	
          // 99加减表
          document.write("<hr />");
          document.write("<table  cellpadding='3' cellspacing='0'>")        
          var s=0;
            for(var i=1;i<=9;i++){
            document.write("<tr >");
          	for(var j=1;j<=i;j++){
          		 if(j==1){
          		 	 document.write("<td class='box1'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
               if(j==2){
          		 	 document.write("<td class='box2'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
                if(j==3){
          		 	 document.write("<td class='box3'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
               if(j==4){
          		 	 document.write("<td class='box4'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
          		  if(j==5){
          		 	 document.write("<td class='box5'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
               if(j==6){
          		 	 document.write("<td class='box6'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
                if(j==7){
          		 	 document.write("<td class='box7'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
               if(j==8){
          		 	 document.write("<td class='box8'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
          		  if(j==9){
          		 	 document.write("<td class='box9'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
               if(j==10){
          		 	 document.write("<td class='box10'>");
          		s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
          		 }
            //   document.write("<td class='xx'>");
          		// s=(i-j+1)+j;
            //   document.write((i-j+1) + "+" + j+"="+s+" ");   
            //   document.write("</td>");
          }     
          	document.write("<br />"); 
          	document.write("</tr>");
          }
         document.write("</table>");



          document.write("<hr />");
          document.write("<table class='ss'>");
          var s=0;

            for(var i=1;i<=9;i++){
            	document.write("<tr>");
          	for(var j=1;j<=i;j++){
               document.write("<td class='xx'>");
          		s=(i+1)-j;
             document.write((i+1) + "-" + j+"="+s+" ");
             document.write("</td>");
          }
          	document.write("<br />"); 
          	document.write("</tr>");
          }  
          document.write("</table>");       	   	
</script>
	
</body>
</html>